<template>
    <div class="list-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-input v-model="queryData.handlerName" placeholder="Spi显示名" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-select placeholder="类型" v-model="queryData.spiType" clearable>
                                    <el-option v-for="(value, key) in SpiType" :label="value" :key="key" :value="key" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <template #toolbar-operation>
                    <el-button type="primary" @click="onCreateEdit()">新建</el-button>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column label="显示名称" width="300" fixed show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" @click="onViewItem(scope.row)">
                            {{ scope.row.handlerName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template #default="{ row }">{{ SpiType[row.spiType] }}</template>
                </el-table-column>
                <el-table-column prop="handlerClass" label="类路径" show-overflow-tooltip />
                <el-table-column prop="description" label="描述" show-overflow-tooltip />
                <el-table-column label="操作" width="135" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="onCreateEdit(scope.row)"> 修改 </el-button>
                        <el-button link type="danger" @click="onDel(scope.row)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { runSpiService } from '@great/services';
import { showPopupBox } from '@great/utils';
import { SpiType } from '@/utils/constant';
import CreateEditModal from './components/list/CreateEditModal.vue';
import { DataGrid, Block, type DataGridInstance } from '@great/components';

// 查询条件
const queryData = ref({
    handlerName: null,
    spiType: null
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await runSpiService.getPage({
            current,
            size,
            handlerName: queryData.value.handlerName ? queryData.value.handlerName : null,
            spiType: queryData.value.spiType ? queryData.value.spiType : null
        });
        return { data: res.data.records, total: res.data.total };
    }
});

// 查看详情
const onViewItem = (row: { id: string }) => {
    showPopupBox(CreateEditModal, {
        row: row
    });
};
// 创建/编辑
const onCreateEdit = (row?: any) => {
    showPopupBox(CreateEditModal, {
        row: row,
        callBack: dataGridRef.value?.refresh
    });
};
// 删除
const onDel = async (row: { handlerName: string; id: string }) => {
    ElMessageBox.confirm(`确认删除Spi ${row.handlerName} ？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            await runSpiService.del(row.id);
            ElNotification({
                title: '删除成功！',
                type: 'success'
            });
            dataGridRef.value?.refresh();
        })
        .catch(() => {});
};
</script>

<style scoped lang="scss">
.list-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
    }
}
</style>
